<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      map: null,
      popup: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
    this.addGeoJson();
  },
  methods: {
    initMap() {
      // 重庆市经纬度
      const cqp = this.$L.latLng(29.5647398, 106.5478767);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 8);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },

    addGeoJson() {
      // 引入geojson文件
      $.getJSON("../data/json/hdjjq.geojson", (data) => {
        this.$L
          .geoJSON(data, {
            onEachFeature: this.onEachFeature,
          })
          .addTo(this.map);
      });
    },

    onEachFeature(feature, layer) {
      layer.on({
        click: this.zoomToFeature,
      });
    },
    zoomToFeature(e) {
      console.log("eeeeeeeee", e);
      this.popup = null;
      this.popup = this.$L
        .marker([e.latlng.lat, e.latlng.lng])
        .addTo(this.map)
        .bindPopup(e.target.feature.properties.Name)
        .openPopup();
      this.map.fitBounds(e.target.getBounds());
    },
  },
  destroyed() {
    this.map.remove();
  },
};
</script>

<style lang="scss" scoped>
</style>>